<template>
	<scroll-view class="sidebar_main_view" scroll-y="true">
			<view v-for="(selection_title,index) in enabled_selections" class="selection_box">
				<p>{{ selection_title }}</p>
			</view>
	</scroll-view>	
</template>

<script>
	export default {
		name:"sidebar",
		data() {
			return {
				enabled_selections: [
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
					"选项1",
					"选项2",
					"选项3",
				]
			};
		}
	}
</script>

<style>
	.sidebar_main_view {
		display: inline-block flex;
		float: left;
		height: 100%;
		width: 25%;
		background-color: lightgrey;
		flex-direction: row;
	}
	.selection_box {
		text-align: center;
		vertical-align: middle;
		height: 10%;
		border-bottom: 1px solid;
		border-color: grey;
	}
	
</style>